<script>
  import { colorList, updateTheme } from '@/components/ProLayout'
  import ASwitch from 'ant-design-vue/es/switch'
  import AList from "ant-design-vue/es/list"
  import AListItem from "ant-design-vue/es/list/Item"
  
  const Meta = AListItem.Meta

  export default {
    name: 'Custom',
    components: {
      AListItem,
      AList,
      ASwitch,
      Meta
    },
    data () {
      return {
      	colorList
      }
    },
    filters: {
      themeFilter(theme) {
        const themeMap = {
          'dark': '暗色',
          'light': '白色'
        }
        return themeMap[theme]
      },
    },
    created() {
      console.log(this.primaryColor)
    },
    methods: {
      colorFilter(color) {
        const c = colorList.filter(o => o.color === color)[0]
        return c && c.key
      },
			changeColor (color) {
        if (this.primaryColor !== color) {
          this.$store.dispatch('ToggleColor', color)
          updateTheme(color)
        }
      },
			changeTheme (color) {
        if (this.primaryColor !== color) {
          this.$store.dispatch('ToggleColor', color)
          updateTheme(color)
        }
      },
      onChange (checked) {
        if (checked) {
          this.$store.dispatch('ToggleTheme',  'dark')
        } else {
          this.$store.dispatch('ToggleTheme',  'light')
        }
      }
    },
    render () {
      return (
        <AList itemLayout="horizontal">
          <AListItem>
            <Meta>
              <a slot="title">风格配色</a>
              <span slot="description">
                整体风格配色设置
              </span>
            </Meta>
            <div slot="actions">
              <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
            </div>
          </AListItem>
          <AListItem>
            <Meta>
              <a slot="title">主题色</a>
              <span slot="description">
                页面风格配色：
                <a-select defaultValue={this.primaryColor} style="width:200px" onChange={this.changeColor}>
						      <a-select-option value="#F5222D"> <span class="selectColor" style="background:#F5222D"></span>薄暮</a-select-option>
						      <a-select-option value="#FA541C"> <span class="selectColor" style="background:#FA541C"></span>火山</a-select-option>
						      <a-select-option value="#FAAD14"> <span class="selectColor" style="background:#FAAD14"></span>日暮</a-select-option>
						      <a-select-option value="#13C2C2"> <span class="selectColor" style="background:#13C2C2"></span>明青</a-select-option>
						      <a-select-option value="#52C41A"> <span class="selectColor" style="background:#52C41A"></span>极光绿</a-select-option>
						      <a-select-option value="#1890FF"> <span class="selectColor" style="background:#1890FF"></span>拂晓蓝（默认）</a-select-option>
						      <a-select-option value="#2F54EB"> <span class="selectColor" style="background:#2F54EB"></span>极客蓝</a-select-option>
						      <a-select-option value="#722ED1"> <span class="selectColor" style="background:#722ED1"></span>酱紫</a-select-option>
						    </a-select>
              </span>
            </Meta>
          </AListItem>
        </AList>
      )
    }
  }
</script>

<style scoped>
.selectColor{
	display:inline-block;position:relative;top:5px;  width:20px;height:20px;margin-right:10px;border-radius: 2px;
}
</style>